// 1.轮播
var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // 水平切换选项
    loop: true, // 循环模式选项
    /* autoplay: {
        delay: 3000     // 延迟
    }, */

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
})   
// 滑入滑出控制轮播
let box = document.querySelector('.swiper-container');
box.onmouseover = () =>{
    mySwiper.autoplay.stop();
}
box.onmouseout = () =>{
    mySwiper.autoplay.start();
}     

// 2.广告位
var advtopBox = document.querySelector('.advtop-con');
advtopBox.innerHTML =  advtop_data.map(item=>{
    return `<div><img src="${item}" alt=""></div>`
}).join('');

// 3.案例
var caseBox = document.querySelector('.case_list');
caseBox.innerHTML = case_data.map(item=>{
    return `
        <li class="case_item">
            <img src="${item.titimg}" alt="">
            <div class="ci_center">
                <h4 class="text_ellipsis">${item.title}</h4>
                <p>${item.classify}</p>
                <div>
                    <i class="look"></i><span>${item.see}</span>
                    <i class="talk"></i><span>${item.talk}</span>
                    <i class="zan"></i><span>${item.zan}</span>
                </div>
            </div>
            <ul class="ci_bottom">
                <li>
                    <img src="${item.userimg}" alt="">
                    <span class="text_ellipsis">${item.username}</span>
                </li>
                <span>${item.reltime}</span>
            </ul>
        </li>
    `
}).join('');